<template>
	<view id="app">
		<view class="app-container">
			<!-- 页面内容渲染区域 -->
		</view>
	</view>
</template>

<script>
/**
 * 应用主入口组件
 * 负责应用的全局初始化和主题管理
 */
import { initSampleData } from '@/utils/sampleData.js'
import { watchSystemTheme } from '@/utils/themeUtils.js'

export default {
	name: 'App',
	
	data() {
		return {
			// 系统主题监听器实例
			systemThemeWatcher: null
		}
	},
	
	/**
	 * 应用启动时执行
	 * 初始化示例数据、设置和主题监听
	 */
	onLaunch() {
		console.log('App Launch')
		
		// 初始化示例数据
		initSampleData()
		
		// 初始化Vuex store设置
		this.$store.dispatch('settings/loadSettings')
		
		// 获取系统信息并设置主题
		uni.getSystemInfo({
			success: (res) => {
				console.log('系统信息:', res)
				
				// 如果系统支持主题检测，则处理主题变化
				if (res.theme) {
					this.handleSystemThemeChange(res.theme)
				}
			}
		})
		
		// 启动系统主题变化监听器
		this.systemThemeWatcher = watchSystemTheme((res) => {
			this.handleSystemThemeChange(res.theme)
		})
	},
	
	/**
	 * 应用显示时执行
	 */
	onShow() {
		console.log('App Show')
	},
	
	/**
	 * 应用隐藏时执行
	 */
	onHide() {
		console.log('App Hide')
	},
	
	/**
	 * 应用卸载时执行
	 * 清理系统主题监听器
	 */
	onUnload() {
		if (this.systemThemeWatcher) {
			this.systemThemeWatcher()
		}
	},
	
	methods: {
		/**
		 * 处理系统主题变化
		 * @param {string} systemTheme - 系统主题类型 ('light' | 'dark')
		 */
		handleSystemThemeChange(systemTheme) {
			// 只有当用户设置为自动模式时才响应系统主题变化
			const currentTheme = this.$store.state.settings.display.theme
			if (currentTheme === 'auto') {
				this.$store.dispatch('settings/applyTheme')
			}
		}
	}
}
</script>

<style lang="scss">
/**
 * 全局样式定义
 * 包含重置样式、通用类和动画定义
 */
@import '@/uni.scss';

/* ==================== 基础重置样式 ==================== */
* {
	box-sizing: border-box;
}

page {
	background-color: var(--bg-primary);
	font-family: $font-family;
	line-height: 1.6;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==================== 布局类 ==================== */
.app-container {
	min-height: 100vh;
}

/* ==================== 文字颜色类 ==================== */
.text-primary {
	color: $primary-blue !important;
}

.text-success {
	color: $complete-green !important;
}

.text-warning {
	color: $high-orange !important;
}

.text-danger {
	color: $urgent-red !important;
}

.text-muted {
	color: $text-light-gray !important;
}

/* ==================== 背景颜色类 ==================== */
.bg-primary {
	background-color: var(--primary-color) !important;
}

.bg-light {
	background-color: var(--bg-primary) !important;
}

.bg-white {
	background-color: var(--bg-secondary) !important;
}

/* ==================== 间距工具类 ==================== */
/* Margin */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: $spacing-xs !important; }
.mt-2 { margin-top: $spacing-sm !important; }
.mt-3 { margin-top: $spacing-md !important; }
.mt-4 { margin-top: $spacing-lg !important; }
.mt-5 { margin-top: $spacing-xl !important; }

.mb-1 { margin-bottom: $spacing-xs !important; }
.mb-2 { margin-bottom: $spacing-sm !important; }
.mb-3 { margin-bottom: $spacing-md !important; }
.mb-4 { margin-bottom: $spacing-lg !important; }
.mb-5 { margin-bottom: $spacing-xl !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.pt-1 { padding-top: $spacing-xs !important; }
.pt-2 { padding-top: $spacing-sm !important; }
.pt-3 { padding-top: $spacing-md !important; }
.pt-4 { padding-top: $spacing-lg !important; }
.pt-5 { padding-top: $spacing-xl !important; }

.pb-1 { padding-bottom: $spacing-xs !important; }
.pb-2 { padding-bottom: $spacing-sm !important; }
.pb-3 { padding-bottom: $spacing-md !important; }
.pb-4 { padding-bottom: $spacing-lg !important; }
.pb-5 { padding-bottom: $spacing-xl !important; }

/* ==================== 显示和布局类 ==================== */
.d-flex {
	display: flex !important;
}

.d-block {
	display: block !important;
}

.d-none {
	display: none !important;
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-between {
	justify-content: space-between !important;
}

.align-items-center {
	align-items: center !important;
}

.flex-1 {
	flex: 1 !important;
}

/* ==================== 边框和阴影类 ==================== */
.border {
	border: 1px solid var(--border-color) !important;
}

.border-top {
	border-top: 1px solid var(--border-color) !important;
}

.border-bottom {
	border-bottom: 1px solid var(--border-color) !important;
}

.border-radius {
	border-radius: $border-radius-md !important;
}

.shadow-sm {
	box-shadow: $shadow-sm !important;
}

.shadow-md {
	box-shadow: $shadow-md !important;
}

/* ==================== 滚动条样式 ==================== */
/* 仅在支持WebKit的平台生效 */
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--border-color);
	border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--text-secondary);
}

/* ==================== 动画工具类 ==================== */
.fade-in {
	animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
	animation: fadeOut 0.3s ease-in-out;
}

.slide-in-right {
	animation: slideInRight 0.3s ease-in-out;
}

.slide-in-left {
	animation: slideInLeft 0.3s ease-in-out;
}

/* ==================== 动画关键帧定义 ==================== */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes slideInRight {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes slideInLeft {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* ==================== 响应式断点 ==================== */
@media (max-width: 750rpx) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 751rpx) {
	.hide-on-desktop {
		display: none !important;
	}
}
</style>
